<template>
  <div class='container'>
<van-nav-bar
  title="不凡"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<img class="dan" src="" alt="">

<div >
<img class="tu" :src="dan.list_pic_url" alt="">
<p class="name"> 
    {{dan.name}}
</p>

    <p>
        {{dan.simple_desc}}

    </p>
    <p>{{goodsList}} </p>
</div>
<div class="duo">
   
<ul >
         <li v-for="(item,index) in xinpin " :key="index"> 
           <img class="mage" :src="item.list_pic_url" alt="">
<h4>{{item.name}}</h4>
<h5> </h5>
         </li>
       </ul>
</div>

  </div>
</template>

<script>
import {    xinpin,dan,paixu  } from "@/api/home/xinpin/index.js"
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
      // 这里存放数据
      return {
          dan:'',
          xinpin:'',
          paixu:'',
          goodsList:'',
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {

xinpin({isHot:1,order:'desc'}).then(res=>{
console.log('xinpin',res);
   this.xinpin=res.data;
})

,

paixu({
    page:1,
}).then(res=>{
    console.log('paixu',res);
       this.paixu=res.data;
})
,
dan({
id:this.$route.params.id
}).then(res=>{
    console.log('dan',res);
    this.dan=res.data;
    if(res.goodsList.length==0){
        this.goodsList='无数据'
    }else{}

})

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）created：在创建vue对象时，当html渲染之前就触发；但是注意，只会触发一次
    mounted () {},
    // 这里存放数据
    beforeCreate () {},
    // 生命周期 - 挂载之前 
    beforeMount () {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    // 生命周期 - 更新之后 
    updated () {},
    // 生命周期 - 销毁之前 
    beforeDestroy() {},
    // 生命周期 - 销毁完成 
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发      activated：是组件被激活后的钩子函数，每次回到页面都会执行
    activated () {},
    // 方法集合
    methods: {
          onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    },
    // 监听属性 类似于data概念
    computed: {


    },
    // 监控data中的数据变化
    watch: {},
  }
</script>

<style scoped lang='scss'>
  /* @import url(); 引入公共css类 */
.dan{
    width: 375px;
}
.tu{
    width: 375px;
    height: 200px;
}
.name{
font-size: 20px;
color:red;}

.duo{
    width: 375px;
    ul{
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        li{width: 50%;
        img{
            width: 100%;
        }} 
    }
}
</style>